<template>
  <loading @loading="onLoading" :display="loadingMore ? 'show' : 'hide'" v-if="shown">
    <div class="loading-more-container" :style="{width: panelWidth + 'px'}">
      <image :src="loadMoreGifSrc" class="loading-more-gif"></image>
    </div>
  </loading>
  <cell v-else class="loading-more-tip" :style="{width: panelWidth + 'px'}">
    <div class="loading-more-tip-line" :style="{width: (panelWidth * 0.2) + 'px'}"></div>
    <text class="loading-more-tip-text">我是有底线的</text>
    <div class="loading-more-tip-line" :style="{width: (panelWidth * 0.2) + 'px'}"></div>
  </cell>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";

  .loading-more {
    &-gif {
      width: 80px;
      height: 80px;
    }
    &-container {
      height: 80px;
      align-items: center;
      justify-content: center;
    }
    &-tip {
      height: 160px;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      &-text {
        color: $color-muted;
        font-size: 24px;
      }
      &-line {
        height: 1px;
        background-color: #ddd;
        margin: 0 20px;
      }
    }
  }
</style>
<script>

let urlPath = require('../include/url-path')
module.exports = {
  props: {
    loadingMore: {default: false},
    width: {default: 0},
    shown: {default: true}
  },

  data () {
    return {
      loadMoreGifSrc: 'images/gif/loading.gif',
      panelWidth: this.width
    }
  },
  components: {},
  created () {
    if (!this.panelWidth) {
      this.panelWidth = 750
    }
    this.loadMoreGifSrc = urlPath.assets(this.loadMoreGifSrc, true)
  },
  methods: {
    onLoading (event) {
      this.$emit('loadingMore', event)
    }
  }
}
</script>
